<template>
  <div>
    <div><h1 style="color: #0a0a80"></h1></div>
      <div id="clazzV" class="clazzV"></div>


    <td>
      <div>
        <el-form :inline="true" :model="formInlinename" class="demo-form-inline">
          <el-form-item >
            <el-input
                v-model="formInlinename.name" placeholder="你可以以姓名方式查询"></el-input>
          </el-form-item>
          <el-form-item>
           <el-button icon="el-icon-search" circle type="primary" @click="onSubmit_name();"></el-button>
          </el-form-item>
        </el-form>
      </div>

    </td>
    <td>
      <div style="white-space: pre;" v-html="'                                                                '"></div>
    </td>


          <td>
            <div>
                  <el-form :inline="true" :model="formInlineclass" class="demo-form-inline">
              <el-form-item >
                <el-input
                    v-model="formInlineclass.clazz" placeholder="亦可以以班级方式查询"></el-input>
              </el-form-item>
              <el-form-item>
               <el-button icon="el-icon-search" circle type="primary" @click="onSubmit_class();"></el-button>
              </el-form-item>
            </el-form>
          </div>
          </td>
    <td>
      <div style="white-space: pre;" v-html="'                                                                '"></div>
    </td>
          <td>
            <div>
              <el-form :inline="true" :model="formInlineroom" class="demo-form-inline">
                <el-form-item >
                  <el-input
                      v-model="formInlineroom.room" placeholder="还可以教研室方式查询"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" circle type="primary" @click="onSubmit_room();"></el-button>
                </el-form-item>
              </el-form>
            </div>
          </td>

    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
      <div class="TeaMain">
      <el-table  stripe border :data="teacher" style="width: 97%" v-loading="loading">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="id" label="工号" >
        </el-table-column>
        <el-table-column prop="clazz" label="任教班级" >
        </el-table-column>
        <el-table-column prop="room" label="所属教研室" >
        </el-table-column>
      </el-table>
      </div>



  </div>
</template>


<script>
import {Liquid} from '@antv/g2plot';

export default {
  name: "clazzView",
  data() {
    return {
      formInlinename: {
        name: ''
      },
      formInlineclass: {
        clazz: ''
      },
      formInlineroom: {
        room: ''
      },
      teacher: [],
      loading: false
    }
  },


  methods: {
    onSubmit_name() {
      this.getRequest('/teacher/' + this.formInlinename.name, {}).then(resp => {
        if (resp) {
          this.teacher = resp;
        }
      })
    },
    onSubmit_class() {
      this.getRequest('/class/' + this.formInlineclass.clazz, {}).then(resp => {
        if (resp) {
          this.teacher = resp;
        }
      })
    },
    onSubmit_room() {
      this.getRequest('/room/' + this.formInlineroom.room, {}).then(resp => {
        if (resp) {
          this.teacher = resp;
        }
      })
    }
  },
}
</script>


<style scoped>
.TeaMain {
  margin-top: 5px;
}
.clazzV {
  margin-top: 5px;
}
body {
  margin: 0;
}
</style>